<template>
    <el-row class="tac" >
        <el-col :span="12">
            <el-menu
                    default-active="2"
                    style="width:2.8rem"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="rgba(56,59,112,1)"
                    text-color="white"
            >
                <!--                    -->
                <div class="el-title">
                    <img src="../assets/logo1.png" alt="">
                </div>
                <el-menu-item index="0" >
                    <i class="iconfont" style="color: white;font-size: 0.3rem;">&#xe647;</i>
                    <span slot="title" style="color: white;">基本资料</span>
                </el-menu-item>
                <el-submenu index="1">
                    <template slot="title">
                        <i class="iconfont" style="color: white;font-size: 0.3rem;margin-left: 0.28rem">&#xe9ac;</i>
                        <span >线上布展</span>
                    </template>
                    <el-menu-item-group>
                        <router-link to="/exhibitorFill">
                            <el-menu-item index="exhibitorFill" >展商主页</el-menu-item>
                        </router-link>
                        <router-link to="/exhibitsFilling">
                        <el-menu-item index="1-2" >
                                展品填报
                        </el-menu-item>
                        </router-link>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="iconfont" style="color: white;font-size: 0.3rem;margin-left: 0.28rem">&#xe608;</i>
                        <span >会议直播</span>
                    </template>
                    <el-menu-item-group>

                        <!-- <router-link to="/on_line"> -->
                        <router-link to="/application_and_management">
                            <el-menu-item index="1-1" >
                                申请及管理
                            </el-menu-item>
                         </router-link>
                        <router-link to="/live_broadcast">
                            <el-menu-item index="1-7" >观众审核</el-menu-item>
                        </router-link>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                        <i class="iconfont" style="color: white;font-size: 0.3rem;margin-left: 0.28rem">&#xe659;</i>
                        <span style="color: white">观众信息管理</span>
                    </template>
                    <el-menu-item-group>
                        <router-link to="/Management">
                        <el-menu-item index="1-5" >
                            信息显示
                        </el-menu-item>
                        </router-link>
                        <!-- <el-menu-item index="1-8" >已有客户</el-menu-item> -->
                        <router-link to="/statistics">
                        <el-menu-item index="1-6" >
                                问卷统计
                        </el-menu-item>
                        </router-link>
                        <el-menu-item index="1-4" >在线客服</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <!-- <el-menu-item index="4">
                    <i class="iconfont" style="color: white;font-size: 0.3rem;margin-left: 0.28rem">&#xe8a2;</i>
                    <span slot="title" >
                        搭建/运输
                    </span>
                </el-menu-item> -->
                <el-menu-item index="5">
                    <i class="iconfont" style="color: white;font-size: 0.26rem;margin-left: 0.28rem">&#xe6d8;</i>
                    <span slot="title" >信息广播</span>
                </el-menu-item>
            </el-menu>
        </el-col>
    </el-row>

</template>

<script>
    export default {
        name: "adminLeft",
        data(){
            return{

            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style lang="less" scoped>
    .tac{
        // height: 10.7rem;
       
        .el-title{
            width:2rem;
            height:0.58rem;
            margin: 0 auto;
            margin-top: 0.1rem;
            margin-bottom: 0.49rem;
            position: relative;
            img{
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
            }
        }
        .el-submenu{
            margin-top: 0.18rem;
        }
        .el-col-12{
            width:2.8rem;
            height:10.7rem;
            background:rgba(56,59,112,1);
        }
        span{
            font-size:0.18rem;
            font-family:Microsoft YaHei;
            font-weight:bold;
            color:rgba(254,254,254,1);
            margin-left: 0.16rem;

        }
        .el-menu-item{
            font-size:0.18rem;
            font-family:Microsoft YaHei;
            font-weight:bold;

        }
        .el-menu-item:nth-of-type(3){
            margin-left: 0.28rem;

        }
        .el-menu-item:nth-of-type(2){
              margin-left: 0.28rem;
          }
        .el-menu-item:nth-of-type(1){
            margin-left: 0.28rem;
        }
        .el-submenu__icon-arrow .el-icon-arrow-down{
            width: 0.1rem;
            height: 0.1rem;
            background-color: #fff;
        }
    }
    /deep/ .el-menu-item,.is-active{
        box-sizing: border-box !important;
        overflow: hidden;
    }
    /deep/ .el-submenu .el-menu-item{
        min-width:0;
    }
    /deep/ .el-menu-item:focus, .el-menu-item:hover {
    outline: 0;
    background-color: #ecf5ff;
    overflow: hidden;
    box-sizing: border-box;
}

</style>
